<template>
	<view>
		<u-toast ref="uToast" />
		<u-navbar :is-back="false" title="图书查询系统"></u-navbar>
		<u-search style="padding: 35rpx" placeholder="请输入图书名查找" v-model="keyword" @custom="searchSubject()"
			:show-action="true"></u-search>

		<template v-if="bookList.length > 0">
			<template v-for="item,index in bookList" :index="index">
				<view class="book">
					<view class="item">
						<view class="left">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="content">
							<view class="title u-line-2">{{item.name + ' ID:' +String(item.id)}}</view>
							<template v-if="item.isLend">
								<u-icon class="delivery-time" color="#e20000" label="已被借阅" size="60"
									name="close-circle"></u-icon>
							</template>
							<template v-else>
								<u-icon class="delivery-time" color="#00cf00" label="可借阅" size="60"
									name="checkmark-circle"></u-icon>
							</template>
						</view>
					</view>
				</view>
			</template>
		</template>
		<template v-else>
			<u-empty mode="data"></u-empty>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backgroundColor: '#001f3f',
				keyword: '',
				bookList: []
			}
		},
		onLoad() {

		},
		methods: {
			async searchSubject() {
				let res = await this.$u.get('http://127.0.0.1:8888/bookName/' + this.keyword);
				this.bookList = res.data.bookDatas
				if (res.code != 20000) {
					this.$refs.uToast.show({
						title: '请求失败',
						type: 'error',
					})
				}
				// this.$refs.uToast.show({
				// 	title: '请求成功',
				// 	type: 'success',
				// })
				if (this.bookList == null) {
					this.bookList = []
				}
			},
		}
	}
</script>


<style lang="scss" scoped>
	.book {
		width: 710rpx;
		background-image: url('@/static/background.jpg');
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 50rpx;
					line-height: 50rpx;
				}


				.delivery-time {
					padding: 50rpx;
					color: #000000;
				}
			}

		}
	}
</style>
